<template>
  <!-- 策略管理 私有池 页面 -->
  <div class="policyManage-page app-container">
    <div class="container-header">
      <div class="left">
        <div class="title">策略管理-私有池</div>
      </div>
      <div>
        <el-button
          type="primary"
          size="small"
          class="search-box"
          @click="addOrUpdateHandle()"
        >
          <i class="el-icon-plus el-icon--right"></i>
          添加
        </el-button>
      </div>
    </div>
    <div class="container">
      <div class="searchTemplate">
        <el-form label-position="left" label-width="82px">
          <el-form-item class="template" label="条件模板：">
            <div
              class="template-item"
              v-for="(item, i) in searchTemplateList"
              :key="i"
              @click="stItemHandle(item, i)"
            >
              <span
                class="template-item-text"
                :class="{ search_font_active: searchTemplate_active == i }"
              >
                {{ item.formworkName }}
              </span>
              <span
                class="iconfont icon-ashbin"
                @click.stop="templateDelHandle(item.formworkId)"
              ></span>
            </div>
            <div
              :class="
                Object.keys(computestList).length
                  ? 'pro_tipBtn'
                  : 'pro_tipBtn_gray'
              "
              style="margin-top: 4px"
              @click="stAddHandle"
            >
              <span class="iconfont icon-jia"></span>
              新建模板
            </div>
            <div
              :class="
                searchTemplate_active != undefined
                  ? 'pro_tipBtn'
                  : 'pro_tipBtn_gray'
              "
              style="margin: 4px 0 0 13px"
              @click="stSaveHandle"
            >
              <span class="iconfont icon-baocun"></span>
              保存
            </div>
          </el-form-item>
          <div class="line"></div>
          <el-form-item label="已选条件：">
            <span
              class="condition"
              v-for="(item, key) in computestList"
              :key="key"
            >
              {{ item }}
              <span class="cha" @click="computestItemHandle(key)">×</span>
            </span>
            <span
              v-show="Object.keys(computestList).length"
              :class="
                Object.keys(computestList).length
                  ? 'pro_tipBtn'
                  : 'pro_tipBtn_gray'
              "
              style="margin-left: 12px; line-height: 22px; height: 26px"
              @click="resetForm"
            >
              清空已选
            </span>
          </el-form-item>
        </el-form>
      </div>

      <el-form
        ref="formInline1"
        label-position="left"
        :inline="true"
        label-width="70px"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="" prop="investName">
          <el-input
            v-model="formInline.investName"
            size="small"
            clearable
            @keyup.enter.native="searchList"
            placeholder="请输入所属投顾"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="strategyName">
          <el-input
            v-model="formInline.strategyName"
            size="small"
            clearable
            @keyup.enter.native="searchList"
            placeholder="请输入策略名称"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="selectCreateDate">
          <el-select
            style="width: 140px"
            size="small"
            v-model="selectCreateDate"
            clearable
            placeholder="请选择成立时间"
          >
            <el-option
              v-for="(item, i) in selectCreateDateList"
              :key="i"
              :label="item"
              :value="i"
            ></el-option>
          </el-select>
          <el-date-picker
            size="small"
            v-model="formInline.startMakeTime"
            type="date"
            value-format="yyyy-MM-dd"
            :disabled="selectCreateDate !== ''"
            style="margin-left: 10px; width: 135px"
            placeholder="开始日期"
          ></el-date-picker>
          <span class="grayLine">-</span>
          <el-date-picker
            size="small"
            v-model="formInline.endMakeTime"
            type="date"
            value-format="yyyy-MM-dd"
            :disabled="selectCreateDate !== ''"
            @keyup.enter.native="searchList"
            style="width: 135px"
            placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="bg-green" size="small" @click="searchList">
            查询
          </el-button>

          <el-button
            size="small"
            @click="resetPage(['formInline1', 'formInline2', 'formInline3'])"
          >
            重置
          </el-button>
          <span
            style="margin-left: 10px; cursor: pointer; color: #1890ff"
            @click="isSelectMore = !isSelectMore"
          >
            {{ isSelectMore ? "收起筛选" : "展示筛选" }}
            <i
              :class="
                isSelectMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
              "
            />
          </span>
        </el-form-item>
      </el-form>

      <el-form
        v-show="isSelectMore"
        ref="formInline2"
        label-position="left"
        label-width="82px"
        :model="formInline"
        class="form2"
      >
        <el-form-item label="投资风格：">
          <div class="flex">
            <span
              class="noLimit_form2"
              :class="{ search_font_active: !formInline.styleList.length }"
              @click="formInline.styleList = []"
            >
              不限
            </span>
            <el-checkbox-group
              v-model="formInline.styleList"
              style="width: 100%"
            >
              <el-checkbox
                v-for="item in select_style"
                :label="item.styleId"
                :key="item.styleId"
              >
                {{ item.styleName }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="投资市场：" prop="strategyMarket">
          <div class="flex">
            <span
              class="noLimit_form2"
              :class="{ search_font_active: !formInline.marketList.length }"
              @click="formInline.marketList = []"
            >
              不限
            </span>
            <el-checkbox-group
              v-model="formInline.marketList"
              style="width: 100%"
            >
              <el-checkbox
                v-for="item in select_market"
                :label="item.id"
                :key="item.id"
              >
                {{ item.strategyMarket }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="投资方法：" prop="strategyMethod">
          <div class="flex">
            <span
              class="noLimit_form2"
              :class="{ search_font_active: !formInline.methodList.length }"
              @click="formInline.methodList = []"
            >
              不限
            </span>
            <el-checkbox-group
              v-model="formInline.methodList"
              style="width: 100%"
            >
              <el-checkbox
                v-for="item in select_method"
                :label="item.methodId"
                :key="item.methodId"
              >
                {{ item.strategyMethod }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="投资标的：" prop="strategySubject">
          <div class="flex">
            <span
              class="noLimit_form2"
              :class="{ search_font_active: !formInline.subjectList.length }"
              @click="formInline.subjectList = []"
            >
              不限
            </span>
            <el-checkbox-group
              v-model="formInline.subjectList"
              style="width: 100%"
            >
              <el-checkbox
                v-for="item in select_subject"
                :label="item.id"
                :key="item.id"
              >
                {{ item.strategySubject }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="自定义标签：" label-width="96px">
          <div class="flex">
            <span
              class="noLimit_form2"
              :class="{ search_font_active: !formInline.tagList.length }"
              @click="formInline.tagList = []"
            >
              不限
            </span>
            <el-checkbox-group v-model="formInline.tagList" style="width: 100%">
              <el-checkbox
                v-for="(item, i) in dict2.tagList"
                :label="item"
                :key="i"
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>

      <el-form
        v-show="isSelectMore"
        ref="formInline3"
        label-position="left"
        label-width="82px"
        :model="formInline"
        class="form3"
      >
        <el-form-item label="收益率：" style="margin-bottom: 10px">
          <el-select
            v-model="formInline.segment"
            size="mini"
            style="width: 110px"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in segmentList"
              :key="item.id"
            ></el-option>
          </el-select>
          <span
            class="noLimit"
            :class="{ search_font_active: searchYIncomeRate_active == -1 }"
            @click="searchYIncomeRateHandle(-1)"
          >
            不限
          </span>
          <span
            class="sLabel"
            :class="{ search_font_active: item.id == searchYIncomeRate_active }"
            v-for="item in search_yIncomeRate_navList"
            :key="item.id"
            @click="searchYIncomeRateHandle(item.id)"
          >
            {{ item.name }}
          </span>
          <span>
            <span
              :class="{ search_font_active: searchYIncomeRate_active == -2 }"
            >
              自定义
            </span>
            <el-input
              v-model="formInline.startIncomeRate"
              @change="searchYIncomeRateCHandle"
              style="width: 80px"
              size="mini"
            >
              <span slot="suffix">%</span>
            </el-input>
            <span class="grayLine">-</span>
            <el-input
              v-model="formInline.endIncomeRate"
              @change="searchYIncomeRateCHandle"
              style="width: 80px"
              size="mini"
            >
              <span slot="suffix">%</span>
            </el-input>
          </span>
        </el-form-item>

        <el-form-item label="最大回撤：" style="margin-bottom: 14px">
          <el-select
            v-model="formInline.maxDownRateSegment"
            size="mini"
            style="width: 110px"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in segmentList"
              :key="item.id"
            ></el-option>
          </el-select>
          <span
            class="noLimit"
            :class="{ search_font_active: searchYMaxBack_active == -1 }"
            @click="searchYMaxBackHandle(-1)"
          >
            不限
          </span>
          <span
            class="sLabel"
            :class="{ search_font_active: item.id == searchYMaxBack_active }"
            v-for="item in search_maxBack_navList"
            :key="item.id"
            @click="searchYMaxBackHandle(item.id)"
          >
            {{ item.name }}
          </span>
          <span>
            <span :class="{ search_font_active: searchYMaxBack_active == -2 }">
              自定义
            </span>
            <el-input
              v-model="formInline.startMaxDownRate"
              @change="maxDownRateCHandle"
              style="width: 80px"
              size="mini"
            >
              <span slot="suffix">%</span>
            </el-input>
            <span class="grayLine">-</span>
            <el-input
              v-model="formInline.endMaxDownRate"
              @change="maxDownRateCHandle"
              style="width: 80px"
              size="mini"
            >
              <span slot="suffix">%</span>
            </el-input>
          </span>
        </el-form-item>

        <el-form-item label="夏普比率：" prop="sharpeRate">
          <div class="flex-h-center">
            <el-select
              v-model="formInline.sharpeRateSegment"
              size="mini"
              style="width: 110px"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in segmentList"
                :key="item.id"
              ></el-option>
            </el-select>
            <el-input
              v-model="formInline.sharpeRate"
              placeholder="请输入"
              style="width: 110px; margin-left: 28px"
              size="mini"
            >
              <template slot="prepend"><p>≥</p></template>
            </el-input>
          </div>
        </el-form-item>
      </el-form>

      <!-- 未展示 收益-风险区间 部分值 -->
      <el-table
        ref="table"
        v-loading="listLoading"
        :key="tableKey"
        :data="list"
        stripe
        fit
        size="mini"
        @sort-change="sortCchange"
        :row-key="(row) => row.strategyInfoVo.strategyId"
        :header-cell-style="{ color: '#333' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="strategyInfoVo.strategyId"
          label="编号"
          align="center"
          width="80"
          fixed
          sortable="custom"
        ></el-table-column>
        <!-- <el-table-column type="selection" :reserve-selection="true" width="38" align="center" fixed></el-table-column> -->
        <el-table-column prop="" label="" align="center" width="40" fixed>
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.strategyInfoVo.netWorthStatus"
              placement="right"
            >
              <svg-icon
                v-show="scope.row.strategyInfoVo.netWorthStatus"
                class="strategyName_tips"
                icon-class="tips"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="strategyInfoVo.strategyName"
          label="策略名称"
          min-width="160"
          fixed
          sortable="custom"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.strategyInfoVo.hasNetWorthStatus"
              style="color: #4f95dd; cursor: pointer"
              @click="netWorthHandle(scope.row.strategyInfoVo.strategyId)"
            >
              <div class="flex-v-center">
                <span>{{ scope.row.strategyInfoVo.strategyName }}</span>
              </div>
            </span>
            <span
              v-else
              style="color: #999; cursor: pointer"
              @click="$message('该策略净值不存在或者少于2条')"
            >
              {{ scope.row.strategyInfoVo.strategyName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="对比" align="center" width="100" fixed>
          <template slot-scope="{ row, $index }">
            <span
              v-if="row.strategyInfoVo.hasNetWorthStatus"
              class="pointer"
              :class="{ fontcolor: !row.addContrast }"
              @click="addContrasthandle(row, $index)"
            >
              <span v-show="!row.addContrast" class="iconfont icon-jia" />
              <span
                v-show="row.addContrast"
                class="iconfont icon-check contrastGray"
              />
              <span
                :class="{ contrastGray: row.addContrast }"
                style="padding-left: 2px"
              >
                {{ !row.addContrast ? "对比" : "已加" }}
              </span>
            </span>
            <span
              v-else
              class="contrastGray"
              @click="$message('该策略净值不存在或者少于2条')"
            >
              <span class="iconfont icon-jia" />
              <span style="padding-left: 2px">对比</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="strategyInfoVo.investName"
          label="所属投顾"
          align="center"
          min-width="120"
          sortable="custom"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="strategyInfoVo.strategyMarket"
          label="投资市场"
          align="center"
          min-width="100"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          prop="strategyInfoVo.strategyStyle"
          label="投资风格"
          align="center"
          width="100"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          prop="strategyInfoVo.strategyMethod"
          label="投资方法"
          align="center"
          min-width="100"
          sortable="custom"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="strategyInfoVo.strategySubject"
          label="投资标的"
          align="center"
          min-width="120"
          sortable="custom"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="strategyInfoVo.strategyBenchmarkingIndex"
          label="对标指数"
          align="center"
          min-width="100"
          sortable="custom"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="strategyInfoVo.createdName"
          label="创建人"
          min-width="100"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="strategyInfoVo.makeTime"
          label="成立日期"
          sortable="custom"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.strategyInfoVo.makeTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="netWorthDetialBean.networthTime"
          label="净值时间"
          sortable="custom"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="netWorthDetialBean.unitNetworth"
          label="单位净值"
          sortable="custom"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="netWorthDetialBean.reinstatementNetworth"
          label="累计净值"
          sortable="custom"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="netWorthDetialBean.cumulativeNetworth"
          label="复权净值"
          sortable="custom"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="netWorthDetialBean.thisyearAnnualizedincomeRate"
          label="今年以来收益率"
          sortable="custom"
          align="center"
          width="142"
        >
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.netWorthDetialBean.thisyearAnnualizedincomeRate !=
                null
              "
              :class="
                scope.row.netWorthDetialBean.thisyearAnnualizedincomeRate > 0
                  ? 'positiveFc'
                  : 'negativeFc'
              "
            >
              {{ scope.row.netWorthDetialBean.thisyearAnnualizedincomeRate }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="netWorthDetialBean.annualizedincomeRate"
          label="收益率"
          sortable="custom"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.netWorthDetialBean.annualizedincomeRate != null"
              :class="
                scope.row.netWorthDetialBean.annualizedincomeRate > 0
                  ? 'positiveFc'
                  : 'negativeFc'
              "
            >
              {{ scope.row.netWorthDetialBean.annualizedincomeRate }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="riskIndicatorsBean.maximumDrawdownRate"
          label="最大回撤"
          sortable="custom"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.riskIndicatorsBean.maximumDrawdownRate != null"
            >
              {{ scope.row.riskIndicatorsBean.maximumDrawdownRate }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="riskIndicatorsBean.annualizedIncomeRate"
          label="收益率(年化)"
          sortable="custom"
          align="center"
          width="130"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.riskIndicatorsBean.annualizedIncomeRate != null"
              :class="
                scope.row.riskIndicatorsBean.annualizedIncomeRate > 0
                  ? 'positiveFc'
                  : 'negativeFc'
              "
            >
              {{ scope.row.riskIndicatorsBean.annualizedIncomeRate }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="riskIndicatorsBean.annualFluctuationsRate"
          label="波动率(年化)"
          sortable="custom"
          align="center"
          width="130"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.riskIndicatorsBean.annualFluctuationsRate != null"
            >
              {{ scope.row.riskIndicatorsBean.annualFluctuationsRate }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="riskIndicatorsBean.sharpeRate"
          label="夏普率"
          align="center"
          sortable="custom"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.riskIndicatorsBean.sharpeRate != null">
              {{ scope.row.riskIndicatorsBean.sharpeRate }}
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="140">
          <template slot-scope="{ row }">
            <el-button
              class="filter-item"
              size="mini"
              icon="el-icon-edit-outline"
              :disabled="row.strategyInfoVo.addType === 1"
              @click="enternetValueHandle(row)"
            >
              录入净值
            </el-button>
            <el-popover
              popper-class="policyManage_popover"
              trigger="hover"
              placement="bottom"
            >
              <div class="flex-vh-center">
                <el-button
                  class="filter-item"
                  size="mini"
                  @click="
                    deleteEnternetValueHandle(row.strategyInfoVo.strategyId)
                  "
                >
                  清空净值
                </el-button>
                <el-button
                  style="margin: 10px 0"
                  class="filter-item"
                  size="mini"
                  icon="el-icon-edit"
                  @click="addOrUpdateHandle(row.strategyInfoVo.strategyId)"
                >
                  编辑
                </el-button>
                <el-button
                  style="margin: 0"
                  class="filter-item"
                  size="mini"
                  icon="el-icon-delete"
                  @click="deleteHandle(row.strategyInfoVo.strategyId)"
                >
                  删除
                </el-button>
              </div>
              <span class="operationMore" slot="reference">···</span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageCurrent"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />

      <addOpen
        :strategyPool="strategyPool"
        v-if="addOrUpdateOpenVisible"
        ref="addOpen"
        @closeOpen="addCloseOpen"
      ></addOpen>
      <enternetValueOpen
        ref="enternetValueOpen"
        v-if="hasEnternetValueOpen"
        @closeOpen="getList"
      ></enternetValueOpen>
      <globalContrastOpen
        ref="globalContrastOpen"
        :list="contrastList"
      ></globalContrastOpen>
      <addTemplateOpen
        :strategyPool="strategyPool"
        v-if="addTemplateOpenVisible"
        ref="addTemplateOpen"
        @closeOpen="addTemplateOpenCloseHandle"
      ></addTemplateOpen>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Pagination from "@/components/Pagination";
import addOpen from "./../add.vue";
import addTemplateOpen from "./../addTemplateOpen.vue";
import {
  fetchList,
  strategyType,
  deleteStrategyInfo,
  getFormworkAndCondition,
  addOrUpdateFormworkAndCondition,
  delStrategyFormwork,
  findStrategyTypeByStrategyId,
  deleteNetWorthByStrategyId,
} from "@/api/policyManage";
import { parseTime } from "@/utils";
import enternetValueOpen from "./../enternetValueOpen.vue";
import globalContrastOpen from "@/components/investComn/globalContrastOpen.vue";

export default {
  name: "PrivatePolicy",
  components: {
    Pagination,
    addOpen,
    enternetValueOpen,
    globalContrastOpen,
    addTemplateOpen,
  },
  data() {
    return {
      // 搜索模板
      addTemplateOpenVisible: false,
      searchTemplate_active: undefined,
      searchTemplateList: [],

      tableKey: 1,
      addContrasting: false, // 是否有勾选全局对比

      hasEnternetValueOpen: false,

      addOrUpdateOpenVisible: false,
      dict: [],
      dict2: [],
      strategyPool: 0, //私有池

      segmentList: [
        {
          id: 0,
          name: "今年以来",
        },
        {
          id: 1,
          name: "近一月",
        },
        {
          id: 3,
          name: "近三月",
        },
        {
          id: 6,
          name: "近六月",
        },
        {
          id: 12,
          name: "近一年",
        },
        {
          id: 24,
          name: "近两年",
        },
        {
          id: 36,
          name: "近三年",
        },
        {
          id: 99,
          name: "成立以来",
        },
      ],
      searchYIncomeRate_active: -1, // -1不限 -2自定义
      search_yIncomeRate_navList: [
        { id: 0, name: "60%以上" },
        { id: 1, name: "50%~60%" },
        { id: 2, name: "40%~50%" },
        { id: 3, name: "30%~40%" },
        { id: 4, name: "20%~30%" },
      ],
      searchYMaxBack_active: -1,
      search_maxBack_navList: [
        { id: 0, name: "5%以内" },
        { id: 1, name: "5%~10%" },
        { id: 2, name: "10%~20%" },
        { id: 3, name: "20%~30%" },
        { id: 4, name: "30%~40%" },
      ],
      maximumDrawdownRateList: ["回撤排名10%", "回撤排名20%", "回撤排名30%"],
      sharpeRateList: ["夏普比率排名10%", "夏普比率排名20%", "夏普比率排名30%"],
      sharpeNum: "",
      syl: "",
      zdhc: "",

      isSelectMore: false,
      selectCreateDateList: [
        "6个月以下",
        "6个月-1年",
        "1-3年",
        "3-5年",
        "5年以上",
      ],
      selectCreateDate: "",
      selectNewDataList: ["15天内", "30天内", "45天内", "60天内"],
      selectNewData: "",
      formInline: {
        searchType: 1, // 模糊搜索
        segment: 99,
        maxDownRateSegment: 99,
        sharpeRateSegment: 99,
        sharpeRate: null,
        startMakeTime: null,
        endMakeTime: null,
        date3: null,
        date4: null,
        methodList: [],
        styleList: [],
        marketList: [],
        subjectList: [],
        tagList: [],
        startIncomeRate: null,
        endIncomeRate: null,
        startMaxDownRate: null,
        endMaxDownRate: null,
      },
      select_market: [],
      select_method: [],
      select_style: [],
      select_subject: [],

      total: 0,
      listLoading: false,
      listQuery: {
        pageCurrent: 1,
        limit: 20,
      },
      list: [],
      multipleSelection: [],

      uploadBtnIcon: "",
      orderInfo: {},
    };
  },
  computed: {
    ...mapGetters(["userId", "contrastList"]),
    computestList() {
      const res = {};
      if (this.formInline.investName) {
        res.investNameText = "投顾名称：" + this.formInline.investName;
      }
      if (this.formInline.strategyName) {
        res.strategyNameText = "策略名称：" + this.formInline.strategyName;
      }
      if (this.formInline.startMakeTime && this.formInline.endMakeTime) {
        res.makeTimeText = `成立时间：${this.formInline.startMakeTime}至${this.formInline.endMakeTime}`;
      } else if (
        !this.formInline.startMakeTime &&
        this.formInline.endMakeTime
      ) {
        res.makeTimeText = `成立时间：成立以来至${this.formInline.endMakeTime}`;
      } else if (
        this.formInline.startMakeTime &&
        !this.formInline.endMakeTime
      ) {
        res.makeTimeText = `成立时间：${this.formInline.startMakeTime}至今`;
      }
      if (this.formInline.styleList && this.formInline.styleList.length) {
        const _l = this.formInline.styleList.length;
        res.styleListText = "投资风格：";
        this.formInline.styleList.forEach((id, index) => {
          res.styleListText =
            res.styleListText +
            this.select_style.find((item) => item.styleId == id).styleName;
          if (_l !== index + 1) {
            res.styleListText = res.styleListText + "、";
          }
        });
      }
      if (this.formInline.marketList && this.formInline.marketList.length) {
        const _l = this.formInline.marketList.length;
        res.marketListText = "投资市场：";
        this.formInline.marketList.forEach((id, index) => {
          res.marketListText =
            res.marketListText +
            this.select_market.find((item) => item.id == id).strategyMarket;
          if (_l !== index + 1) {
            res.marketListText = res.marketListText + "、";
          }
        });
      }
      if (this.formInline.methodList && this.formInline.methodList.length) {
        const _l = this.formInline.methodList.length;
        res.methodListText = "投资方法：";
        this.formInline.methodList.forEach((id, index) => {
          res.methodListText =
            res.methodListText +
            this.select_method.find((item) => item.methodId == id)
              .strategyMethod;
          if (_l !== index + 1) {
            res.methodListText = res.methodListText + "、";
          }
        });
      }
      if (this.formInline.subjectList && this.formInline.subjectList.length) {
        const _l = this.formInline.subjectList.length;
        res.subjectListText = "投资标的：";
        this.formInline.subjectList.forEach((id, index) => {
          res.subjectListText =
            res.subjectListText +
            this.select_subject.find((item) => item.id == id).strategySubject;
          if (_l !== index + 1) {
            res.subjectListText = res.subjectListText + "、";
          }
        });
      }
      if (this.formInline.tagList && this.formInline.tagList.length) {
        const _l = this.formInline.tagList.length;
        res.tagListText = "自定义标签：";
        this.formInline.tagList.forEach((text, index) => {
          res.tagListText = res.tagListText + text;
          if (_l !== index + 1) {
            res.tagListText = res.tagListText + "、";
          }
        });
      }
      if (this.formInline.startIncomeRate && this.formInline.endIncomeRate) {
        res.yIncomeRateText = `年化收益：${
          this.segmentList.find((item) => item.id == this.formInline.segment)
            .name
        }、${this.formInline.startIncomeRate}%~${
          this.formInline.endIncomeRate
        }%`;
      } else if (
        this.formInline.startIncomeRate &&
        !this.formInline.endIncomeRate
      ) {
        res.yIncomeRateText = `年化收益：${
          this.segmentList.find((item) => item.id == this.formInline.segment)
            .name
        }、${this.formInline.startIncomeRate}%以上`;
      } else if (
        !this.formInline.startIncomeRate &&
        this.formInline.endIncomeRate
      ) {
        res.yIncomeRateText = `年化收益：${
          this.segmentList.find((item) => item.id == this.formInline.segment)
            .name
        }、${this.formInline.endIncomeRate}%以下`;
      }
      if (this.formInline.startMaxDownRate && this.formInline.endMaxDownRate) {
        res.maxDownRateText = `最大回撤：${
          this.segmentList.find(
            (item) => item.id == this.formInline.maxDownRateSegment
          ).name
        }、${this.formInline.startMaxDownRate}%~${
          this.formInline.endMaxDownRate
        }%`;
      } else if (
        this.formInline.startMaxDownRate &&
        !this.formInline.endMaxDownRate
      ) {
        res.maxDownRateText = `最大回撤：${
          this.segmentList.find(
            (item) => item.id == this.formInline.maxDownRateSegment
          ).name
        }、${this.formInline.startMaxDownRate}%以上`;
      } else if (
        !this.formInline.startMaxDownRate &&
        this.formInline.endMaxDownRate
      ) {
        res.maxDownRateText = `最大回撤：${
          this.segmentList.find(
            (item) => item.id == this.formInline.maxDownRateSegment
          ).name
        }、${this.formInline.endMaxDownRate}%以下`;
      }
      if (this.formInline.sharpeRate) {
        res.sharpeRateText = `夏普比率：≥ ${this.formInline.sharpeRate}`;
      }
      return res;
    },
  },
  watch: {
    syl(i) {
      const list = [10, 20, 30];
      this.formInline.syl1 = 0;
      this.formInline.syl2 = list[i];
    },
    zdhc(i) {
      const list = [10, 20, 30];
      this.formInline.zdhc1 = 0;
      this.formInline.zdhc2 = list[i];
    },
    sharpeNum(i) {
      const list = [10, 20, 30];
      this.formInline.sharpeNum1 = 0;
      this.formInline.sharpeNum2 = list[i];
    },
    selectCreateDate(val) {
      if (typeof val === "number") {
        const list = [
          [0, 6],
          [6, 12],
          [12, 36],
          [36, 60],
          [60, 0],
        ];
        this.formInline.startMakeTime = this.stageDate(
          list[val][0],
          list[val][1]
        )[0];
        this.formInline.endMakeTime = this.stageDate(
          list[val][0],
          list[val][1]
        )[1];
        if (val == 4) this.formInline.startMakeTime = null;
      } else {
        this.formInline.startMakeTime = null;
        this.formInline.endMakeTime = null;
      }
    },
    selectNewData(val) {
      if (typeof val === "number") {
        const list = [15, 30, 45, 60];
        const startTime = new Date().getTime() - 3600 * 1000 * 24 * list[val];
        const start = parseTime(startTime, "{y}-{m}-{d}");
        this.formInline.date3 = start;
        this.formInline.date4 = parseTime(new Date(), "{y}-{m}-{d}");
      } else {
        this.formInline.date3 = "";
        this.formInline.date4 = "";
      }
    },
    contrastList(newList, oldList) {
      if (newList.length == oldList.length) {
        // todo 此处newList==oldList则是数组减少，未知原因
        this.syncContrastListHandle();
      }
      if (!newList.length) {
        this.list.forEach((row) => {
          row.addContrast = false;
        });
        // this.tableKey++
      }
    },
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route);
    this.$setTagsViewTitle(this.tempRoute, `策略私有池`);
    if (this.$route.query.investName) {
      this.formInline.investName = this.$route.query.investName;
      this.formInline.adviserId = this.$route.query.investId;
      this.formInline.searchType = 0;
    }
    if (this.$route.query.boardStatus) {
      this.formInline.boardStatus = this.$route.query.boardStatus;
    }
    this.getFormworkAndCondition();
    this.getList();
    this.findStrategyTypeByStrategyId();
    this.getStrategyType();
  },
  activated() {
    if (this.contrastList.length) {
      this.$refs.globalContrastOpen.showOpen = true;
    }
    if (this.$route.query.typePage === "add") {
      this.formInline.investName = this.$route.query.investName;
      this.formInline.adviserId = this.$route.query.investId;
      this.formInline.searchType = 0;
      this.getList();
      this.getStrategyType();
    }
    if (
      this.$route.query.investName &&
      this.$route.query.investName != this.formInline.investName
    ) {
      this.formInline.investName = this.$route.query.investName;
      this.formInline.adviserId = this.$route.query.investId;
      this.formInline.searchType = 0;
      this.getList();
      this.getStrategyType();
    }
  },
  methods: {
    sortCchange(column) {
      if (!column.order) {
        this.orderInfo = {};
      } else {
        this.orderInfo = {
          [column.prop.split(".")[1]]:
            column.order == "ascending" ? "asc" : "desc",
        };
      }
      this.getList();
    },
    addCloseOpen() {
      this.findStrategyTypeByStrategyId();
      this.getList();
    },
    addTemplateOpenCloseHandle() {
      this.getFormworkAndCondition();
      this.findStrategyTypeByStrategyId();
      this.getList();
    },
    stAddHandle() {
      this.addTemplateOpenVisible = true;
      this.$nextTick(() => {
        // if(this.searchTemplate_active!=undefined) {
        //   this.$refs.addTemplateOpen.init('update', this.searchTemplateList[this.searchTemplate_active], this.userId)
        // }else {
        //   this.$refs.addTemplateOpen.init('add', this.formInline, this.userId)
        // }
        this.$refs.addTemplateOpen.init("add", this.formInline, this.userId);
      });
    },
    stSaveHandle() {
      addOrUpdateFormworkAndCondition({
        // searchStrategyTypeDTO:
        //   this.searchTemplateList[this.searchTemplate_active]
        //     .formworkConditionVo[0],
        searchStrategyTypeDTO: this.formInline,
        formworkId:
          this.searchTemplateList[this.searchTemplate_active].formworkId,
        formworkName:
          this.searchTemplateList[this.searchTemplate_active].formworkName,
        mark: this.searchTemplateList[this.searchTemplate_active].mark,
        strategyPool: this.strategyPool,
        userId: this.userId,
      }).then((res) => {
        if (res.code == 0) {
          this.getFormworkAndCondition();
          this.$notify({
            type: "success",
            message: `保存成功`,
            duration: 2000,
          });
        }
      });
    },
    templateDelHandle(formworkId) {
      this.$confirm("确认删除？", "提示", {
        type: "warning",
      })
        .then((_) => {
          delStrategyFormwork({
            formworkId,
          }).then((res) => {
            if (res.code == 0) {
              this.$notify({
                type: "success",
                message: "删除成功",
                duration: 2000,
              });
              this.resetForm();
              this.getFormworkAndCondition();
              this.getList();
            } else {
              this.$notify({
                type: "error",
                message: "删除失败",
                duration: 2000,
              });
            }
          });
        })
        .catch((_) => {});
    },
    getFormworkAndCondition() {
      getFormworkAndCondition({
        userId: this.userId,
        strategyPool: this.strategyPool,
      }).then((res) => {
        this.searchTemplateList = res.body;
      });
    },
    computestItemHandle(key) {
      switch (key) {
        case "investNameText":
          this.formInline.investName = null;
          break;
        case "strategyNameText":
          this.formInline.strategyName = null;
          break;
        case "makeTimeText":
          this.formInline.startMakeTime = null;
          this.formInline.endMakeTime = null;
          break;
        case "methodListText":
          this.formInline.methodList = [];
          break;
        case "styleListText":
          this.formInline.styleList = [];
          break;
        case "marketListText":
          this.formInline.marketList = [];
          break;
        case "subjectListText":
          this.formInline.subjectList = [];
          break;
        case "tagListText":
          this.formInline.tagList = [];
          break;
        case "yIncomeRateText":
          this.formInline.startIncomeRate = null;
          this.formInline.endIncomeRate = null;
          this.searchYIncomeRate_active = -1;
          break;
        case "maxDownRateText":
          this.formInline.startMaxDownRate = null;
          this.formInline.endMaxDownRate = null;
          this.searchYMaxBack_active = -1;
          break;
        case "sharpeRateText":
          this.formInline.sharpeRate = null;
          break;
        default:
          break;
      }
    },
    stItemHandle(prams, i) {
      const item = prams.formworkConditionVo[0];
      this.searchTemplate_active = i;
      if (item.startIncomeRate || item.endIncomeRate) {
        this.searchYIncomeRate_active = -2;
      } else {
        this.searchYIncomeRate_active = -1;
      }
      if (item.startMaxDownRate || item.endMaxDownRate) {
        this.searchYMaxBack_active = -2;
      } else {
        this.searchYMaxBack_active = -1;
      }
      this.formInline = Object.assign({}, item);
      this.searchList();
    },
    searchYIncomeRateCHandle() {
      this.searchYIncomeRate_active = -2;
    },
    maxDownRateCHandle() {
      this.searchYMaxBack_active = -2;
    },
    searchYIncomeRateHandle(i) {
      this.searchYIncomeRate_active = i;
      switch (i) {
        case 0:
          this.formInline.startIncomeRate = 60;
          this.formInline.endIncomeRate = null;
          break;
        case 1:
          this.formInline.startIncomeRate = 50;
          this.formInline.endIncomeRate = 60;
          break;
        case 2:
          this.formInline.startIncomeRate = 40;
          this.formInline.endIncomeRate = 50;
          break;
        case 3:
          this.formInline.startIncomeRate = 30;
          this.formInline.endIncomeRate = 40;
          break;
        case 4:
          this.formInline.startIncomeRate = 20;
          this.formInline.endIncomeRate = 30;
          break;
        default:
          this.formInline.startIncomeRate = null;
          this.formInline.endIncomeRate = null;
          break;
      }
    },
    searchYMaxBackHandle(i) {
      this.searchYMaxBack_active = i;
      switch (i) {
        case 0:
          this.formInline.startMaxDownRate = null;
          this.formInline.endMaxDownRate = 5;
          break;
        case 1:
          this.formInline.startMaxDownRate = 5;
          this.formInline.endMaxDownRate = 10;
          break;
        case 2:
          this.formInline.startMaxDownRate = 10;
          this.formInline.endMaxDownRate = 20;
          break;
        case 3:
          this.formInline.startMaxDownRate = 20;
          this.formInline.endMaxDownRate = 30;
          break;
        case 4:
          this.formInline.startMaxDownRate = 30;
          this.formInline.endMaxDownRate = 40;
          break;
        default:
          this.formInline.startMaxDownRate = null;
          this.formInline.endMaxDownRate = null;
          break;
      }
    },
    // 同步对比框数据和列表数据
    syncContrastListHandle() {
      // let tag = 0
      if (!this.contrastList.length) {
        this.list.forEach((row) => {
          // tag = 1
          row.addContrast = false;
        });
      } else {
        const list = this.contrastList.filter(
          (item) => item.contrastObj.type == 1
        );
        this.list.forEach((row, index) => {
          row.addContrast = false;
          const i = list.findIndex(
            (item) => item.contrastObj.id == row.strategyInfoVo.strategyId
          );
          if (i != -1) {
            // tag = 1
            this.list[index].addContrast = true;
          }
        });
      }
      // if(tag) this.tableKey++
    },
    addContrasthandle(row, i) {
      this.$refs.globalContrastOpen.showOpen = true;
      this.$store.commit("contrast/toggleShowOpen", true);
      row.addContrast = !row.addContrast;
      if (this.contrastList.length == 20) {
        this.$message({
          message: "最多添加20条数据",
          type: "warning",
        });
        return;
      }
      // this.$set(this.list, i, row)  // 更新表格数据
      if (row.addContrast) {
        row.contrastObj = {
          type: 1,
          id: row.strategyInfoVo.strategyId,
          name: row.strategyInfoVo.strategyName,
          enterTime: row.strategyInfoVo.makeTime,
          annualizedIncome: row.riskIndicatorsBean.annualizedIncomeRate,
          annualFluctuations: row.riskIndicatorsBean.annualFluctuationsRate,
        };
        this.$store.commit("contrast/addContrastList", row);
      } else {
        const i = this.contrastList.findIndex(
          (item) =>
            item.contrastObj.id == row.strategyInfoVo.strategyId &&
            item.contrastObj.type == 1
        );
        this.$store.commit("contrast/removeContrastList", i);
      }
    },
    enternetValueHandle(params) {
      const row = params.strategyInfoVo;
      this.hasEnternetValueOpen = true;
      this.$nextTick(() => {
        this.$refs.enternetValueOpen.init({
          investName: row.investName,
          strategyId: row.strategyId,
          strategyName: row.strategyName,
          userId: this.userId,
          strategyNetWorthStyle: row.strategyNetWorthStyle,
          networth: params.netWorthDetialBean.unitNetworth,
          networthTime: params.netWorthDetialBean.networthTime,
        });
      });
    },
    deleteEnternetValueHandle(strategyId) {
      this.$confirm("确认清空该策略净值？", "提示", {
        type: "warning",
      })
        .then((_) => {
          deleteNetWorthByStrategyId({ strategyId: strategyId }).then((res) => {
            if (res.code == 0) {
              this.$notify({
                type: "success",
                message: "清空净值成功",
                duration: 2000,
              });
              this.getList();
            }
          });
        })
        .catch((_) => {});
    },
    // contrastHandle() {
    //   if(this.multipleSelection.length<2) {
    //     this.$message({
    //       type: 'warning',
    //       message: '请先勾选列表中2条以上策略',
    //       duration: 2000
    //     })
    //     return false
    //   }
    //   if(this.multipleSelection.length>20) {
    //     this.$message({
    //       type: 'warning',
    //       message: '对比策略不得多于20条',
    //       duration: 2000
    //     })
    //     return false
    //   }
    //   this.$router.push({
    //     path: '/policyManage/contrast',
    //     query: {
    //       list: JSON.stringify(this.multipleSelection)
    //     }
    //   })
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return {
          strategyId: item.strategyInfoVo.strategyId,
          strategyName: item.strategyInfoVo.strategyName,
        };
      });
    },
    deleteHandle(strategyId) {
      this.$confirm("确认删除？", "提示", {
        type: "warning",
      })
        .then((_) => {
          deleteStrategyInfo({
            strategyPool: this.strategyPool,
            createdBy: this.userId,
            strategyId,
          }).then((res) => {
            if (res.code == 0) {
              this.$notify({
                type: "success",
                message: "删除成功",
                duration: 2000,
              });
              this.getList();
            }
          });
        })
        .catch((_) => {});
    },
    addOrUpdateHandle(strategyId) {
      this.addOrUpdateOpenVisible = true;
      this.$nextTick(() => {
        if (this.$route.query.investName) {
          this.$refs.addOpen.init(
            strategyId,
            this.dict,
            this.dict2,
            this.userId,
            this.$route.query.investId,
            this.$route.query.investName
          );
        } else {
          this.$refs.addOpen.init(
            strategyId,
            this.dict,
            this.dict2,
            this.userId
          );
        }
      });
    },
    stageDate(s, e) {
      const s_time = s ? s * 30 : 1;
      const day = parseTime(new Date(), "{d}");
      const endTime = new Date().getTime() - 3600 * 1000 * 24 * s_time;
      const startTime = new Date().getTime() - 3600 * 1000 * 24 * e * 30.5;
      let end = parseTime(endTime, "{y}-{m}-{d}");
      let start = parseTime(startTime, "{y}-{m}-{d}");
      const endList = end.split("-");
      const startList = start.split("-");
      endList[2] = day;
      startList[2] = day;
      start = startList.join("-");
      end = endList.join("-");
      return [start, end];
    },
    resetForm() {
      this.selectCreateDate = "";
      this.selectNewData = "";
      this.searchYIncomeRate_active = null;
      this.searchYMaxBack_active = null;
      this.searchTemplate_active = undefined;
      this.formInline = {
        searchType: 1, // 模糊搜索
        segment: 99,
        maxDownRateSegment: 99,
        sharpeRateSegment: 99,
        startMakeTime: null,
        endMakeTime: null,
        date3: null,
        date4: null,
        methodList: [],
        styleList: [],
        marketList: [],
        subjectList: [],
        tagList: [],
        startIncomeRate: null,
        endIncomeRate: null,
        startMaxDownRate: null,
        endMaxDownRate: null,
      };
    },
    resetPage(formNameList) {
      // formNameList.forEach((element) => {
      // this.$refs[element].resetFields();
      // });
      this.resetForm();
      this.$router.push("/privatePolicy");
      this.getList();
    },
    netWorthHandle(id) {
      this.$router.push({
        path: `/policyManage/privateNetWorthAnalysis/${id}`,
        query: {
          strategyPool: this.strategyPool,
          userId: this.userId,
        },
      });
    },
    findStrategyTypeByStrategyId() {
      findStrategyTypeByStrategyId({
        userId: this.userId,
        strategyPool: this.strategyPool,
        strategyTypeStatus: 1,
      }).then((res) => {
        this.dict2 = res.body;
      });
    },
    getStrategyType() {
      strategyType().then((res) => {
        console.log("分类", res);
        this.dict = res.body;
        this.select_market = res.body.market;
        this.select_method = res.body.method;
        this.select_style = res.body.style;
        this.select_subject = res.body.subject;
      });
    },
    searchList() {
      this.listQuery.pageCurrent = 1;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      fetchList({
        userId: this.userId,
        orderInfo: this.orderInfo,
        strategyPool: this.strategyPool,
        ...this.listQuery,
        ...this.formInline,
      }).then((res) => {
        this.listLoading = false;
        console.log("策略管理", res);
        this.list = res.body;
        this.total = res.count || 0;

        if (this.contrastList.length) this.syncContrastListHandle();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container-header {
  padding: 16px 20px;
}
.policyManage-page {
  position: relative;
  .new-date {
    ::v-deep .el-form-item__label {
      width: 100px !important;
    }
  }
  .label-width-120 {
    ::v-deep .el-form-item__label {
      width: 110px !important;
    }
  }
  .label-width-60 {
    ::v-deep .el-form-item__label {
      width: 56px !important;
    }
  }
  .label-width-80 {
    ::v-deep .el-form-item__label {
      width: 80px !important;
    }
  }
  ::v-deep .el-form-item {
    margin-bottom: 20px;
    .el-checkbox__label {
      color: #333333 !important;
      font-weight: normal;
    }
  }
  .demo-form-inline {
    margin-top: 16px;
  }
  .form2,
  .form3 {
    min-width: 1000px;
    max-width: 1400px;
    width: 72%;
    ::v-deep .el-form-item {
      margin-bottom: 0px;
    }
    ::v-deep .el-input-group__prepend {
      padding: 0 10px;
    }
    ::v-deep .el-form-item--medium .el-form-item__content {
      line-height: 32px;
    }
  }
  .form3 {
    ::v-deep .el-form-item:last-child {
      margin-bottom: 20px;
    }
  }
  .sLabel {
    display: inline-block;
    width: 80px;
    text-align: left;
    cursor: pointer;
    &:hover {
      color: #1890ff;
    }
  }
  .noLimit {
    display: inline-block;
    width: 80px;
    text-align: center;
    cursor: pointer;
  }
  .search_font_active {
    color: #1890ff !important;
  }
  .noLimit_form2 {
    width: 54px;
    text-align: left;
    cursor: pointer;
  }
  .grayLine {
    color: #bfbfbf;
  }

  .strategyName_tips {
    min-width: 18px;
    font-size: 18px;
    color: #fb9391;
    margin-left: 2px;
  }

  .operationMore {
    padding-left: 10px;
    font-weight: bold;
    cursor: pointer;
  }
  .icon-jia {
    font-size: 12px;
  }

  .searchTemplate {
    border-radius: 2px;
    border: 1px solid #e8e8e8;
    padding: 3px 11px;
    .line {
      border: 1px dashed #e8e8e8;
      margin: 3px 0;
    }
    .el-form-item {
      margin-bottom: 0;
    }
    .template {
      ::v-deep .el-form-item__content {
        display: flex;
      }
    }
    .template-item {
      color: #333333;
      cursor: pointer;
      display: flex;
      align-items: center;
      margin-right: 28px;
      // & + .template-item { margin-left: 28px; }
      .template-item-text:hover {
        color: #1890ff;
      }
      .icon-ashbin {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin-left: 6px;
        visibility: hidden;
        &:hover {
          color: #1890ff;
        }
      }
      &:hover .icon-ashbin {
        visibility: visible;
      }
    }
    .condition {
      font-size: 12px;
      padding: 6px 8px;
      background: #f1f1f1;
      border-radius: 4px;
      cursor: pointer;
      & + .condition {
        margin-left: 8px;
      }
      .cha {
        margin-left: 4px;
        font-size: 16px;
        color: #bfbfbf;
      }
      &:hover {
        color: #1890ff;
        .cha {
          color: #1890ff;
        }
      }
    }
  }

  .pro_tipBtn {
    display: inline-block;
    line-height: 26px;
    height: 27px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.65);
    padding: 0 10px;
    cursor: pointer;
    .iconfont {
      padding-right: 6px;
      font-size: 12px;
    }
    &:hover {
      color: #1890ff;
      border: 1px solid #1890ff;
    }
  }
  .pro_tipBtn_gray {
    display: inline-block;
    line-height: 26px;
    height: 27px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.15);
    padding: 0 10px;
    user-select: none;
    pointer-events: none;
    cursor: pointer;
    .iconfont {
      padding-right: 6px;
      font-size: 12px;
    }
  }
}
</style>
